<template>
  <layout>
    <template v-slot:title>工作分解
    </template>
    <template v-slot:actions>
      <el-button type="primary" size="mini" @click="saveGraph">保存</el-button>
    </template>
    <div class="tree">
      <div class="tree-graph" @mousewheel="handleZoom" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @mousemove="handleMouseMove">
        <div ref="treeContainer" style="transition:0.1s liner">
          <Vue2OrgTree ref="tree" :data="data" :collapsable="true" :render-content="renderContent" @on-expand="handleExpandClick" @on-node-click="handleNodeClick" class="tree-graph-tree"></Vue2OrgTree>
        </div>
      </div>

      <div class="tree-property">
        <div class="props-empty" v-if="Object.keys(nodeSelect).length==0">
          请先点击左侧，选择图中节点
        </div>
        <div class="props" v-if="Object.keys(nodeSelect).length!=0">
          <div class="props-item">
            <div class="props-item-label">
              名称
            </div>
            <div class="props-item-actions">
            </div>
            <div class="props-item-value">
              <el-input v-model="nodeSelect.label" placeholder="" size="small"></el-input>
            </div>
          </div>
        </div>
        <!-- 开关 -->
        <div class="props" v-if="Object.keys(nodeSelect).length!=0">
          <div class="props-item">
            <el-switch style="display: block" v-model="value2" @change="hchange" active-color="#13ce66" inactive-color="#ff4949" active-text="关" inactive-text="开">
            </el-switch>
          </div>
        </div>

        <div class="props" v-if="Object.keys(nodeSelect).length!=0">
          <div class="props-item" v-show="kaiguan">
            <div class="props-item-label" contenteditable="true">
              场景
            </div>
            <div class="props-item-value">
              <el-input v-model="nodeProps['_scene']" placeholder="请输入场景值" size="small" @blur.native.capture="update"></el-input>
            </div>
          </div>
          <div class="props-item" v-for="(v,k,index) in nodeProps" :key="index" v-if="k!='_scene'">
            <!-- <template v-if="k!='_scene'"> -->
            <div class="props-item-label" contenteditable="true" @blur="editPropLabel(k)" :title="k" :data-label="k" @keydown="checkLabelKeydown">
              {{k}}
            </div>
            <div class="props-item-actions">
              <i class="el-icon-delete" :data-label="k" @click="removeProp"></i>
              <!-- <i class="el-icon-d-caret"></i> -->
            </div>
            <div class="props-item-value">
              <el-input v-model="nodeProps[k]" placeholder="" size="small" @blur.native.capture="update"></el-input>
            </div>
            <!-- </template> -->
          </div>

        </div>
        <!-- 相关文档 -->
        <div class="props" @click="dialogTableVisible = true" v-show="kaiguan" v-if="Object.keys(nodeSelect).length!=0">
          <div class="props-item">
            <div class="props-item-label">
              相关文档
            </div>
            <div class="props-item-actions">
            </div>
            <div class="props-item-value">

              <el-tooltip class="item" effect="dark" :content="nodeSelect.xgwd" placement="top-start">

                <el-input class="xgwdput" v-model="nodeSelect.xgwd" :disabled="true" placeholder="从清单中多选" size="small"></el-input>
              </el-tooltip>
            </div>
          </div>
        </div>
        <!-- 实用工具 -->
        <div class="props" @click="dialogTableVisibles = true" v-show="kaiguan" v-if="Object.keys(nodeSelect).length!=0">
          <div class="props-item">
            <div class="props-item-label">
              使用工具
            </div>
            <div class="props-item-actions">
            </div>
            <div class="props-item-value">

              <el-tooltip class="item" effect="dark" :content="nodeSelect.sygj" placement="top-start">

                <el-input v-model="nodeSelect.sygj" placeholder="从模型库中多选" :disabled="true" size="small"></el-input>
              </el-tooltip>
            </div>
          </div>
        </div>
        <!-- 维修性预估值 -->
        <div class="props" v-show="kaiguan" v-if="Object.keys(nodeSelect).length!=0">
          <div class="props-item">
            <div class="props-item-label">
              维修性预估值
            </div>
            <div class="props-item-actions">
            </div>
            <div class="props-item-value">
              <el-input v-model="nodeSelect.wxygz" placeholder="请填写维修性预估值" size="small"></el-input>
            </div>
          </div>
        </div>
        <!-- 维修性分配值 -->
        <div class="props" v-show="kaiguan" v-if="Object.keys(nodeSelect).length!=0">
          <div class="props-item">
            <div class="props-item-label">
              维修性分配值
            </div>
            <div class="props-item-actions">
            </div>
            <div class="props-item-value">
              <el-input v-model="nodeSelect.wxfpz" placeholder="请填写维修性分配值" size="small"></el-input>
            </div>
          </div>
        </div>
        <!-- 仿真工作开展人 -->
        <div class="props" v-show="kaiguan" @click="dialogTableVisible2 = true" v-if="Object.keys(nodeSelect).length!=0">
          <div class="props-item">
            <div class="props-item-label">
              仿真工作开展人
            </div>
            <div class="props-item-actions">
            </div>
            <div class="props-item-value">
              <el-input v-model="nodeSelect.fzgzkzr" placeholder="从人员管理库中多选" size="small"></el-input>
            </div>
          </div>
        </div>

        <!-- 相关指标 -->
        <div class="props" v-show="kaiguan" v-if="Object.keys(nodeSelect).length!=0">
          <div class="props-item">
            <div class="props-item-label">
              相关指标
            </div>
            <div class="props-item-actions">
            </div>
            <div class="props-item-value">
              <el-input v-model="nodeSelect.xgzb" placeholder="从指标体系维护中多选" size="small"></el-input>
            </div>
          </div>
        </div>

        <!-- 弹窗------------------------ -->
        <el-dialog title="相关文档" :visible.sync="dialogTableVisible" :before-close="handleClose">
          <el-tabs>
            <el-tab-pane label="指标文档">
              <el-table :data="documentsTableData" ref="registTable" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="version" label="版本">
                </el-table-column>
                <el-table-column prop="path" label="查看">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="维修程序" lazy>
              <el-table :data="repairServiceTableData" ref="registTable1" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="version" label="版本">
                </el-table-column>
                <el-table-column prop="path" label="查看">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="标准文档" lazy>
              <el-table :data="standardTableData" ref="registTable2" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="version" label="版本">
                </el-table-column>
                <el-table-column prop="path" label="查看">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">确 定</el-button>
          </div>

        </el-dialog>

        <el-dialog title="使用工具" :visible.sync="dialogTableVisibles" :before-close="handleClose">

          <el-tabs>
            <el-tab-pane label="数字样机">
              <el-table :data="dmuTableData" ref="numjyq" border style="width: 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="version" label="版本">
                </el-table-column>
                <el-table-column prop="path" label="查看">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="维修工具" lazy>
              <el-table :data="serviceaidTableData" ref="numjyw" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="version" label="版本">
                </el-table-column>
                <el-table-column prop="path" label="查看">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="维修工装" lazy>
              <el-table :data="associateTableData" ref="numjye" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="version" label="版本">
                </el-table-column>
                <el-table-column prop="path" label="查看">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="耗材" lazy>
              <el-table :data="getListConsumable" ref="numjyr" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="version" label="版本">
                </el-table-column>
                <el-table-column prop="path" label="查看">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">取 消</el-button>
            <el-button type="primary" @click="numjy()">确 定</el-button>
          </div>

        </el-dialog>

        <el-dialog title="维修性分配值" :visible.sync="dialogTableVisible2">
          <el-tabs>
            <el-tab-pane label="设计专业">
              <el-table :data="personnelTableData" ref="rykza" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="title" label="岗位">
                </el-table-column>
                <el-table-column prop="position" label="职称">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="维修专业" lazy>
              <el-table :data="serviceTableData" ref="rykzs" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="title" label="岗位">
                </el-table-column>
                <el-table-column prop="position" label="职称">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="总师" lazy>
              <el-table :data="alwaysTableData" ref="rykzd" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="title" label="岗位">
                </el-table-column>
                <el-table-column prop="position" label="职称">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmitrykz">确 定</el-button>
          </div>

        </el-dialog>

      </div>
    </div>

    <el-dialog title="确认" :visible.sync="dialogDeleteConfirm" width="400px">
      <span>确实要删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteConfirm = false">取 消</el-button>
        <el-button type="primary" @click="execRemoveNode">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="确认" :visible.sync="dialogDeletePropConfirm" width="400px">
      <span>确实要此属性吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDeletePropConfirm = false">取 消</el-button>
        <el-button type="primary" @click="execRemoveProp">确 定</el-button>
      </span>
    </el-dialog>
  </layout>
</template>
<script>
import layout from '@/components/Layout';
import Vue2OrgTree from 'vue2-org-tree';
import 'vue2-org-tree/dist/style.css';
import { default as apiList2 } from '../../apis/wendang';
import { default as apiList1 } from '../../apis/moxing';
import { default as apiList3 } from '../../apis/renyuan';

import { default as apiList } from '@/apis/list';
import { openScene } from '@/apis/actions';
import zoom, { onZoom, onDragMouseDown, onDragMouseUp, onDragMouseMove } from '@/utils/zoom';
export default {
  components: { layout, Vue2OrgTree },
  data() {
    return {
      // 人员
      personnelTableData: [],
      serviceTableData: [],
      alwaysTableData: [],
      dialogTableVisible2: false,

      // 模型
      dmuTableData: [],
      serviceaidTableData: [],
      associateTableData: [],
      getListConsumable: [],
      dialogTableVisibles: false,

      // 文档
      documentsTableData: [],
      repairServiceTableData: [],
      standardTableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      nodeSelect: {},
      nodeProps: {},
      data: {},
      value2: true,
      kaiguan: true,
      emptyData: {
        label: '根节点',
        value: '-1',
        expand: true,
        props: { _scene: '' },
        children: [],
      },

      deleteNode: {},
      deletePropLabel: '',
      dialogDeleteConfirm: false,
      dialogDeletePropConfirm: false,
    };
  },
  created() {
    this.getListDmu(), this.getListServiceaid(), this.getListAssociate(), this.getListConsumables();
    // 人员
    this.getListPersonnel(),
      this.getListService(),
      this.getListAlways(),
      // 文档
      this.getListDocuments(),
      this.getListRepairService(),
      this.getListStandard();
  },
  mounted() {
    this.loadForm();
    zoom.setZoomTrigger(this.$refs.tree);
    zoom.setDragTrigger(this.$refs.treeContainer);
  },

  methods: {
    hchange(value) {
      console.log(value);
      if (value == true) {
        console.log(this.kaiguan, '开关');
        this.kaiguan = false;
      } else {
        this.kaiguan = true;
      }
    },
    ...apiList,
    ...apiList1,
    ...apiList2,
    ...apiList3,

    // 人员--------------------------------------------------
    /** 查询列表(设计专业) */
    getListPersonnel() {
      this.searchsheji({ sort: 1, busiId: this.$route.query.id }).then(res => {
        this.personnelTableData = res.data;
      });
    },

    /** 查询列表(维修专业) */
    getListService() {
      this.searchsheji({ sort: 2, busiId: this.$route.query.id }).then(res => {
        this.serviceTableData = res.data;
      });
    },

    /** 查询列表(总师) */
    getListAlways() {
      this.searchsheji({ sort: 3, busiId: this.$route.query.id }).then(res => {
        this.alwaysTableData = res.data;
      });
    },

    // 模型--------------------------------------------------------------------
    /** 查询列表(数字样机) */
    getListDmu() {
      this.searchnumjy({ busiId: this.$route.query.id, sort: 1 }).then(res => {
        this.dmuTableData = res.data;
      });
    },

    /** 查询列表(维修工具) */
    getListServiceaid() {
      this.searchnumjy({ busiId: this.$route.query.id, sort: 2 }).then(res => {
        this.serviceaidTableData = res.data;
      });
    },

    /** 查询列表(维修工装) */
    getListAssociate() {
      // associateTableData
      this.searchnumjy({ busiId: this.$route.query.id, sort: 3 }).then(res => {
        this.associateTableData = res.data;
      });
    },

    /** 查询列表(耗材) */
    getListConsumables() {
      // getListConsumable
      this.searchnumjy({ busiId: this.$route.query.id, sort: 4 }).then(res => {
        this.getListConsumable = res.data;
      });
    },

    // 文档--------------------------------------------------------------------------
    /** 查询列表(指标文档) */

    handleClose() {
      this.dialogTableVisible = false;
      this.dialogTableVisibles = false;
    },
    //获取多选框事件等-------------------------------------------
    onSubmit() {
      // debugger;
      // console.log(this.$refs.registTable.selection, 'registTableregistTable');
      var chaxunlist = [];
      var chaxun = this.$refs.registTable.selection;
      var chaxun1 = this.$refs.registTable1 ? this.$refs.registTable1.selection : [];
      var chaxun2 = this.$refs.registTable2 ? this.$refs.registTable2.selection : [];

      chaxun.forEach(function (item, index) {
        chaxunlist.push(item.name);
      });
      chaxun1.forEach(function (item, index) {
        chaxunlist.push(item.name);
      });
      chaxun2.forEach(function (item, index) {
        chaxunlist.push(item.name);
      });
      console.log(chaxunlist);
      let result = chaxunlist.join(',');
      console.log(result);
      this.nodeSelect.xgwd = result;
      this.dialogTableVisible = false;
    },

    numjy() {
      var numjylist = [];
      var numjy1 = this.$refs.numjyq.selection;
      var numjy2 = this.$refs.numjyw ? this.$refs.numjyw.selection : [];
      var numjy3 = this.$refs.numjye ? this.$refs.numjye.selection : [];
      var numjy4 = this.$refs.numjyr ? this.$refs.numjyr.selection : [];

      numjy1.forEach(function (item, index) {
        numjylist.push(item.name);
      });
      numjy2.forEach(function (item, index) {
        numjylist.push(item.name);
      });
      numjy3.forEach(function (item, index) {
        numjylist.push(item.name);
      });
      numjy4.forEach(function (item, index) {
        numjylist.push(item.name);
      });
      console.log(numjylist);
      let numjyzlist1 = numjylist.join(',');

      this.nodeSelect.sygj = numjyzlist1;

      this.dialogTableVisibles = false;
    },
    onSubmitrykz() {
      var rykzlist = [];
      var rykz1 = this.$refs.rykza.selection;
      var rykz2 = this.$refs.rykzs ? this.$refs.rykzs.selection : [];
      var rykz3 = this.$refs.rykzd ? this.$refs.rykzd.selection : [];

      rykz1.forEach(function (item, index) {
        rykzlist.push(item.name);
      });
      rykz2.forEach(function (item, index) {
        rykzlist.push(item.name);
      });
      rykz3.forEach(function (item, index) {
        rykzlist.push(item.name);
      });
      console.log(rykzlist);
      let rykzf = rykzlist.join(',');
      console.log(rykzf);
      this.nodeSelect.fzgzkzr = rykzf;
      this.dialogTableVisible2 = false;
    },
    //获取多选框事件等-------------------------------------------
    getListDocuments() {
      this.searchzbwd({ busiId: this.$route.query.id, sort: 1 }).then(res => {
        this.documentsTableData = res.data;
      });
    },
    /** 查询列表(维修程序) */
    getListRepairService() {
      this.searchzbwd({ busiId: this.$route.query.id, sort: 2 }).then(res => {
        this.repairServiceTableData = res.data;
      });
    },

    /** 查询列表(标准文档) */
    getListStandard() {
      this.searchzbwd({ busiId: this.$route.query.id, sort: 3 }).then(res => {
        this.standardTableData = res.data;
      });
    },

    /** --------------------------------------------------------------------- */

    handleExpandClick: function (e, data) {
      data.expand = !data.expand;
    },
    handleNodeClick: function (e, data) { },
    handleZoom: function (value) {
      onZoom(value);
    },
    handleMouseDown: function (e) {
      onDragMouseDown(e);
    },
    handleMouseUp: function (e) {
      onDragMouseUp(e);
    },
    handleMouseMove: function (e) {
      onDragMouseMove(e);
    },
    renderContent: function (h, data) {
      let createHandler = this.createNode;
      let editHandler = this.editeNode;
      let removeHandler = this.removeNode;
      let propsHandler = this.propsNode;
      let propsEventHandler = this.eventProps;

      if (data.value && data.value != -1) {
        return (
          <div class="tree-node">
            <div class="tree-node-del" onClick={() => removeHandler(data)}>
              <i class="el-icon-close"></i>
            </div>
            <div class="tree-node-label" onClick={() => propsHandler(data)}>
              {data.label}
            </div>
            <div class="tree-node-link">
              <span onClick={() => createHandler(data)}>新增</span>
              <span onClick={() => propsHandler(data)}>属性</span>
              <span v-show={data.props['_scene']} onClick={() => propsEventHandler(data)}>
                {data.props._scene}
              </span>
            </div>
          </div>
        );
      } else {
        return (
          <div class="tree-node">
            <div class="tree-node-label" onClick={() => propsHandler(data)}>
              {data.label}
            </div>
            <div class="tree-node-link">
              <span onClick={() => createHandler(data)}>新增</span>
            </div>
          </div>
        );
      }
    },
    update: function () {
      this.$forceUpdate();
    },
    createNode: function (data) {
      data.children.push({
        value: data.value.replace('-1', 'root') + '_' + (data.children.length + 1),
        label: '新节点' + (data.children.length + 1),
        expand: true,
        props: { _scene: '' },
        children: [],
      });
      this.$forceUpdate();
    },
    editeNode: function (data) { },
    removeNode: function (data) {
      this.dialogDeleteConfirm = true;
      this.deleteNode = data;
    },
    execRemoveNode: function () {
      let findNode;
      const findParent = (srcNode, findNode) => {
        let gotNode = srcNode.children.find(x => x.value == findNode.value);
        if (gotNode) {
          console.log('查找', gotNode.value, '找到结果', findNode);
          return srcNode;
        } else {
          for (let i = 0; i < srcNode.children.length; i++) {
            let nodeChild = srcNode.children[i];
            gotNode = findParent(nodeChild, findNode);
            if (gotNode) return gotNode;
          }
        }
      };
      let parent = findParent(this.data, this.deleteNode);
      let idx = parent.children.findIndex(x => x.value == this.deleteNode.value);
      parent.children.splice(idx, 1);

      this.dialogDeleteConfirm = false;
    },
    propsNode: function (data) {
      this.nodeSelect = data;
      this.nodeProps = data.props;
      this.$forceUpdate();
    },
    editPropLabel: function (origin) {
      let value = this.nodeProps[origin];
      let newLabel = event.target.innerText;

      if (newLabel == '_scene') {
        this.$message.error('请不要使用系统保留字段');
        event.target.innerText = origin;
        return;
      }

      if (newLabel == origin) return;
      if (this.nodeProps[newLabel]) {
        this.$message.error('名称已存在');
        event.target.innerText = origin;
        return;
      }
      this.$set(this.nodeProps, newLabel, value);
      this.$delete(this.nodeProps, origin);

      // 获取选定对象
      event.target.scrollLeft = 0;
    },
    createProp: function (data) {
      let i = Object.keys(this.nodeProps).length;
      this.$set(this.nodeProps, '标签' + i, '');
    },
    loadForm: function () {
      this.getForm(this.$route.query.id).then(res => {
        this.item = res.data;
        this.item.graph = JSON.parse(this.item.graph);

        if (this.item.graph && this.item.graph.children) {
          this.data = this.item.graph;
        } else {
          this.data = this.emptyData;
        }
      });
    },
    saveGraph: function () {
      this.item.graph = JSON.stringify(this.data);
      this.saveForm(this.item).then(res => {
        if (res.data == true) {
          this.$message.success('保存成功');
          this.naviBack();
        }
      });
    },
    removeProp(e) {
      this.deletePropLabel = e.target.dataset.label;
      this.dialogDeletePropConfirm = true;
    },
    execRemoveProp() {
      delete this.nodeProps[this.deletePropLabel];
      this.deletePropLabel = '';
      this.dialogDeletePropConfirm = false;
    },
    naviBack() {
      setTimeout(() => {
        this.$router.go(-1);
      }, 1500);
    },
    eventProps(data) {
      openScene(['openVRP', data.props._scene]);
    },
    checkLabelKeydown(e) {
      if (e.keyCode == 13) {
        e.target.blur();
        return false;
      }
    },
  },
};
</script>
<style  scoped lang="scss">
@import '@/assets/dark.scss';

$treePropWidth: 400px;

.tree {
  width: 100%;
  height: 100vh;

  &-graph {
    width: calc(100% - $treePropWidth);
    height: 100%;
    float: left;
    padding: 0px;
    overflow: hidden;
    cursor: grab;
    box-sizing: border-box;
    background-color: $backColor;

    &-tree {
      box-sizing: border-box;
      text-align: center;
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: $backColor;

      ::v-deep .org-tree {
        display: inline-block !important;
        background-color: $backColor;
      }

      ::v-deep .org-tree-node-label-inner {
        cursor: pointer;
        padding: 0px !important;
      }
      ::v-deep .tree-node {
        min-width: 100px;
        height: 40px;
        padding: 5px 10px;
        cursor: pointer;
        position: relative;
        border-radius: 4px;
        background-color: #fafafa;

        &:hover {
          background-color: #fafafa;
          //删除节点的红圆圈
          .tree-node-del {
            display: inline-block;
            border: solid 1px $fontColor;
            &:hover {
              background-color: rgba(238, 8, 8, 0.877);
            }
          }
          //节点名称样式
          .tree-node-label {
            // lebel缩小
            margin-top: 0px;
            height: 20px;
            line-height: 20px;
          }
          //新增、删除按钮样式
          .tree-node-link {
            height: 20px;
            display: inline-block;
          }
        }
        //删除按钮
        .tree-node-del {
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 50%;
          color: white;
          position: absolute;
          top: -10px;
          right: -10px;
          font-size: 12px;
          display: none;
          cursor: pointer;
          z-index: 10;
          background-color: rgba(197, 4, 4, 0.877);
        }

        .tree-node-label {
          height: 35px;
          line-height: 35px;
          cursor: pointer;
          overflow: hidden;
          transition: all 0.3s;
          margin-top: 5px;
        }
      }
      ::v-deep .tree-node-link {
        height: 0px;
        // line-height:20px;
        color: #c8c8c8;
        font-size: 12px;
        margin-top: 5px;
        overflow: hidden;
        transition: all 0.2s linear;
        span {
          // display: none;
          margin: 0px 5px;
          &:hover {
            color: #2c7fc4;
          }
        }
      }
    }
  }
  &-property {
    width: $treePropWidth;
    height: 100%;
    padding: 50px 20px;
    box-sizing: border-box;
    background-color: #f3f3f3;
    background-color: $backColor2;
    margin-left: calc(100% - $treePropWidth);

    .props {
      &:first-of-type {
        border-bottom: dashed 1px #d5d5d5;
        margin-bottom: 10px;
      }
      &-item {
        height: 50px;
        line-height: 50px;
        position: relative;
        z-index: 1005;
        &-label {
          width: 140px;
          padding-right: 10px;
          box-sizing: border-box;
          text-align: right;
          overflow: hidden;
          float: left;
          height: 30px;
          line-height: 30px;
          margin-top: 10px;
          outline-color: #409eff;
          color: $fontColor;
          white-space: nowrap;
        }
        &-value {
          margin-left: 150px;
          margin-right: 35px;
          z-index: 1005;
        }
        &-actions {
          width: 30px;
          float: right;
          i {
            width: 30px;
            height: 30px;
            line-height: 30px;
            color: #b5b5b5;
            cursor: pointer;
            text-align: center;

            &:hover {
              color: white;
              background-color: #c8c8c8;
              border-radius: 5px;
            }
          }
        }
      }

      &-new {
        width: 100%;
        height: 8px;
        text-align: center;
        z-index: 9998;
        i {
          width: 70px;
          height: 30px;
          line-height: 30px;
          cursor: pointer;
          text-align: center;
          border-radius: 5px;
          color: white;
          background-color: #c8c8c8;
          z-index: 9999;
          &:hover {
            display: inline-block;
            background-color: #b5b5b5;
          }
        }
      }
    }
    .props-empty {
      color: white;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }

  .org-tree-container {
    transition: 0.4s;
  }
}

.el-table {
  background-color: #212a39;
}
</style>